iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
1
自我挑戰組

微程式語言白話文運動系列 第 12

微聊 MVC 模式 - View 三部曲

  • 分享至 

  • xImage
  •  

Dom 到底是什麼?

Dom (Document Object Model)

是在 window 下更詳細的操作表,是一個將 HTML 文件以樹狀的結構來表示的模型,而組合起來的樹狀圖,我們稱之為「DOM Tree」。

<div class="library">
  <div class="cover">
    <a class="cover-link" data-key="<%= book.title %>" href="#collapseBook" data-toggle="collapse" data-target="#collapseBook">
      <%= render partial: "shared/frontend/book_cover", locals: {book: book, size: :small} %>
      <div><%= book.title %></div>
    </a>
  </div>
  <%= link_to "Read on Leanpub",read_book_path(book), method: "POST"%>
  <% if book.md_data %>
    <p><%= link_to "下載", book.md_url, target: "_blank" %></p>
  <% else %>
    <p>沒有上傳 PDF</p>
  <% end %>
</div>

先不管內容是在寫什麼,光看這個程式碼的架構來說,每一個標籤裡面又包了一層標籤,然後又一層一層延伸下去,當然這架構都是有存在的必要。這裡我必須提到"全面啟動"這部電影,像是裡面一層一層的夢境,每層夢境都是有一些事情要執行,也會牽動到整個架構完整性。這就是「DOM Tree」的架構,方便開發者在設計網頁時有較直覺方式開發,而 DOM API 就是定義了讓 JavaScript 可以存取、改變 HTML 架構、樣式和內容的方法,甚至是對節點綁定的事件。JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。讓開發者使用 JavaScript 時對 HTML 文件做操作。
inception

window.addEventListener("turbolinks:load", function () {
  if (document.querySelector("section.library")) {
    const bookInfo = document.querySelector("section.library").firstElementChild;
    bookInfo.addEventListener("click", (e) => {
      if (e.target.classList.contains("book-cover")) {
        // TODO;
      }
    });

操作方法以這個案例來說,微人想要使用 JavaScript 操作 HTML ,此操作對象 section 標籤中的 class 名為library的子元素標籤下,下一個監聽事件,等待觸發事件後執行指定的動作。今天也是淺淺的聊了一下在使用 JavaScript 操作起手式。我們明天見,掰餔。


上一篇
微聊 MVC 模式 - View 二部曲
下一篇
微聊 MVC 模式 - View 四部曲
系列文
微程式語言白話文運動30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言